<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 小鱼商城</title>
    <link rel="stylesheet" href="../css/profile.css">
</head>
<body>
    <header class="header">
        <!-- 同首页的头部 -->
    </header>

    <main class="profile-container">
        <div class="profile-sidebar">
            <div class="user-info">
                <div class="avatar">
                    <img src="../images/avatar.jpg" alt="用户头像" id="userAvatar">
                    <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
                    <button id="changeAvatarBtn">更换头像</button>
                </div>
                <h3 class="username" id="displayUsername">用户名</h3>
            </div>
            <nav class="profile-nav">
                <a href="profile.html" class="active">个人资料</a>
                <a href="orders.html">我的订单</a>
                <a href="addresses.html">收货地址</a>
                <a href="#">安全设置</a>
                <a href="#" id="logoutBtn">退出登录</a>
            </nav>
        </div>
        
        <div class="profile-content">
            <h2>个人资料</h2>
            <form id="profileForm">
                <div class="form-group">
                    <label for="nickname">昵称</label>
                    <input type="text" id="nickname" name="nickname">
                </div>
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" name="email">
                </div>
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" name="phone">
                </div>
                <div class="form-group">
                    <label for="birthday">生日</label>
                    <input type="date" id="birthday" name="birthday">
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender" name="gender">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="other">其他</option>
                        <option value="secret">保密</option>
                    </select>
                </div>
                <button type="submit">保存修改</button>
            </form>
        </div>
    </main>

    <footer class="footer">
        <!-- 同首页的页脚 -->
    </footer>

    <script src="../js/utils.js"></script>
    <script src="../js/profile.js"></script>
</body>
</html>